<template>
    <div class="login">
        <div class="login-box">
            <div class="image-box"><img src="@/assets/logo.png" alt=""></div>
            <el-form
                :model="form"
                :rules="rules"
            >
                <el-form-item prop="username">
                    <el-input v-model="form.username" :prefix-icon="UserFilled"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input show-password v-model="form.password" :prefix-icon="Lock"></el-input>
                </el-form-item>
                <div class="submit">
                    <el-button type="primary" @click="userLogin">登录</el-button>
                    <el-button type="info">重置</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script setup>
    import {UserFilled, Lock} from '@element-plus/icons'
    import { login } from '@/api'
    import { reactive } from 'vue'
    import { useRouter } from 'vue-router'
    let router = useRouter()
    let form = reactive({
        username: 'admin',
        password: '123456'
    })
    let rules = reactive({
        username: [
            {
                required: true,
                trigger: 'blur',
                message: '请输入登录名称'
            }
        ],
        password: [
            {
                required: true,
                trigger: 'blur',
                message: '请输入密码'
            }
        ]
    })

    async function userLogin() {
        let data = await login(form)
        // console.log(data)
        router.push('/main')

    }
</script>

<style lang="scss" scoped>
    .login {
        width: 100%;
        height: 100%;
        background-color: #2b4b6b;
        display: flex;
        align-items: center;
        justify-content: center;
        .login-box {
            position: relative;
            width: 450px;
            height: 304px;
            border-radius: 3px;
            background-color: #fff;
            padding: 20px;
            padding-top: 100px;
            .image-box {
                position: absolute;
                width: 152px;
                height: 152px;
                background-color: #fff;
                padding: 10px;
                border-radius: 152px;
                left: 149px;
                top: -76px;
                box-shadow: 0 0 10px #ddd;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #eee;
                }
            }
        }
        .submit {
            text-align: right;
        }
    }
</style>

